<template>
    <div class="main-wrapper">
        <div class="left_side_box">
            <HouseAnalysis />
            <GenderRatioAnalysis />
            <SpecialCarePeople />
        </div>
        <div class="middle_box">
            <StatAnalysis />
            <RoomEarlyWarn />
        </div>
        <div class="right_side_box">
            <DeviceLigature />
            <DoorDynamics />
            <ParkDynamics />
        </div>
    </div>
</template>

<script setup lang="ts">
import HouseAnalysis from './components/LeftSide/HouseAnalysis/index.vue';
import GenderRatioAnalysis from './components/LeftSide/GenderRatioAnalysis/index.vue';
import SpecialCarePeople from './components/LeftSide/SpecialCarePeople/index.vue';

import StatAnalysis from './components/middle/StatAnalysis/index.vue';
import RoomEarlyWarn from './components/middle/RoomEarlyWarn/index.vue';

import DeviceLigature from './components/RightSide/DeviceLigature/index.vue';
import DoorDynamics from './components/RightSide/DoorDynamics/index.vue';
import ParkDynamics from './components/RightSide/ParkDynamics/index.vue';
</script>

<style lang="less" scoped>
.main-wrapper {
    flex: 1;
    display: flex;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    padding: 0 15px;
    .left_side_box {
        width: 25%;
    }
    .middle_box {
        width: 45%;
        display: flex;
        flex-direction: column;
        margin: 0 15px;
    }
    .right_side_box {
        width: 27%;
    }
}
</style>